<template>
  <view style="padding-bottom: 120rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :customBack="backToHome"
      :title="title"
      :titleWidth="450"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>
    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view style="" v-if="tabIndex == 0">
      <view style="background-color: #FFFFFF; padding: 10rpx 0;">
        <u-button class="u-m-l-30" @tap="addModuleClick()" type="warning" size="mini">添加申请</u-button>
      </view>
      <medals-apply
        @edit="() => onEdit(item)"
        @delete="() => onDelete(index)"
        v-for="(item, index) in form.MedalsList"
        :key="index"
        :value="item"
        :index="index"
      ></medals-apply>
    </view>

    <view class="" v-if="tabIndex == 1">
      <u-cell-item title="申请文件" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
      <u-cell-item :arrow="false" style="padding: 10rpx;">
        <image-upload v-model="applyPhoto"></image-upload>
      </u-cell-item>
      <u-cell-item :arrow="false" title="收货地址">
        <city-select :value="areaCode" @city-change="onCityChange"></city-select>
        <u-input inputAlign="right" v-model="form.Delivery_Address" placeholder="详细地址"></u-input>
      </u-cell-item>
      <u-cell-item :arrow="false">
        <view class="u-font-9 u-text-left">
          *务必详细确保能收到快递（不必在详细地址栏填写省、市、区，只需填写街道名称，门牌号码，楼层和房间号等信息）
        </view>
      </u-cell-item>

      <!-- <u-cell-item title="审核流品牌" :arrow="false" :border-bottom="false" required>
        <u-radio-group v-model="form.Aub_Brand">
          <view class="grid-2">
            <u-radio :label-size="26" :name="5">八喜</u-radio>
            <u-radio :label-size="26" :name="6">夏贝</u-radio>
            <u-radio :label-size="26" :name="7">德地氏</u-radio>
            <u-radio :label-size="26" :name="8">伯爵</u-radio>
            <u-radio :label-size="26" :name="0">无</u-radio>
          </view>
        </u-radio-group>
      </u-cell-item>
      <u-cell-item :arrow="false" style="padding: 0 30rpx;">
        <view style="color: red; text-align: left;">
          请选择审核流品牌，此选项是根据所选品牌指定对应审核流，选择“无”代表无需根据品牌判断使用指定审核流，在所选品牌查找不到审核流信息时，会查询所有审核流中的第一条做为审核流程
        </view>
      </u-cell-item> -->

      <u-cell-item :arrow="false" title="申请备注">
        <u-input type="textarea" inputAlign="right" placeholder="备注" v-model="form.Remake"></u-input>
      </u-cell-item>
    </view>

    <view class="" v-if="tabIndex == 2">
      <basic-information
        v-if="state.ShowLevel == 1"
        :metadata="state.DataBaseInfo"
        :showOtherInfo="false"
        :showReview="false"
        :showGrade="false"
        :showParent="false"
        :loadCity="loadCity"
        :data="{
          Dealer_BaseInfo: state.First_Dealer_BaseInfo
        }"
      ></basic-information>

      <block v-if="state.ShowLevel == 2">
        <u-cell-item
          title="一级经销商名称"
          :arrow="false"
          :value="state.First_Dealer_BaseInfo.Name"
          :border-bottom="false"
        ></u-cell-item>
        <basic-information
          :metadata="state.DataBaseInfo"
          :showOtherInfo="false"
          :showReview="false"
          :showGrade="false"
          :showParent="false"
          :loadCity="loadCity"
          :data="{
            Dealer_BaseInfo: state.Double_Dealer_BaseInfo
          }"
        ></basic-information>
      </block>

      <block v-if="state.ShowLevel == 3">
        <u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
        <u-cell-item
          title="二级经销商名称"
          :arrow="false"
          :value="state.Double_Dealer_BaseInfo.Name"
          :border-bottom="false"
        ></u-cell-item>
        <store-information :loadCity="loadCity" :data="state.Door_Dealer_BaseInfo"></store-information>
      </block>
    </view>

    <view class="btn-group-fixed">
      <u-button :disabled="btnDisabled" type="warning" @tap="submit">保存提交</u-button>
    </view>

    <u-popup
      mode="bottom"
      height="80%"
      :border-radius="24"
      v-model="showApplyModal"
      :mask-close-able="true"
      cancel-text="取消"
      :showLoading="false"
      :async-close="true"
    >
      <view class="" style="padding-bottom: 120rpx;">
        <view class="u-font-28 u-text-center" style="margin: 20rpx 0;font-weight: bold;">添加奖牌</view>
        <medals-apply-form ref="applyForm" :loadForm="loadForm"></medals-apply-form>
        <view class="btn-group-fixed u-flex">
          <u-button size="medium" @tap="showApplyModal = false">取消</u-button>
          <u-button type="warning" @tap="addModule" size="medium">确认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnDisabled: false,
      title: '奖牌申请',

      tabList: [{ name: '奖牌申请' }, { name: '上传申请文件' }, { name: '基本信息' }],
      tabIndex: 0,

      DealerId: 10195,
      selectType: 1,
      ModultPrototypeAuditId: 10207,

      moduleList: [],
      shellPrototypeList: [],
      entityPrototypeList: [],

      showApplyModal: false,
      loadForm: false,
      loadCity: false,

      areaCode: [],

      state: {
        ShowLevel: null,
        First_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        Door_Dealer_BaseInfo: {},
        DoorPhotoList: [],
        Dealer_RelationList: [],
        DataBaseInfo: {}
      },

      applyPhoto: [],

      form: {
        DealerId: null,
        Delivery_ProvinceId: null,
        Delivery_CityId: null,
        Delivery_DistrictId: null,
        Delivery_Address: '',
        ApplyForPhoto: '',
        Remake: '',
        MedalsList: []
        // Aub_Brand: ''
      }
    };
  },

  onLoad(options) {
    if (options.DealerId) {
      this.DealerId = options.DealerId;
      this.form.DealerId = options.DealerId;
    }
    this.init();

    if (this.$isWeixin()) {
      uni.setNavigationBarTitle({
        title: this.title
      });
    }
  },

  methods: {
    backToHome() {
      uni.navigateBack();
    },

    onCityChange(e) {
      if (e.province) {
        this.form.Delivery_ProvinceId = e.province.value;
      }
      if (e.city) {
        this.form.Delivery_CityId = e.city.value;
      }
      if (e.area) {
        this.form.Delivery_DistrictId = e.area.value;
      }
    },

    submit() {
      let me = this;
      me.btnDisabled = true;
      this.form.ApplyForPhoto = this.applyPhoto.map(item => item.Value).join(',');

      console.log(this.form);

      this.$u.api.saveMedalsApply(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$u.toast(ResultMessage);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          me.btnDisabled = false;
        }
      });
    },

    addModuleClick(selectType) {
      this.loadForm = false;
      this.showApplyModal = true;
    },

    onEdit(item, selectType) {
      this.loadForm = true;
      this.showApplyModal = true;

      this.$nextTick(() => {
        this.$refs.applyForm.initForm(Object.assign({}, item));
      });
    },

    onDelete(index) {
      this.form.MedalsList.splice(index, 1);
    },

    addModule() {
      const applyForm = this.$refs.applyForm.form;

      if (!this.loadForm) {
        this.form.MedalsList.push({
          uuid: this.$u.guid(),
          GroupId: null,
          editable: true,
          ApplyList: [applyForm]
        });
      } else {
        const current = this.form.MedalsList.find(item => (item.uuid = this.$refs.applyForm.uuid));

        if (current.ApplyList && current.ApplyList.length > 0) {
          current.ApplyList[0] = Object.assign(current.ApplyList[0], this.$u.deepClone(applyForm));
        }
      }

      this.showApplyModal = false;
    },

    init() {
      this.$u.api
        .getDealerApplyDetail({
          DealerId: this.DealerId,
          SelectType: this.selectType
        })
        .then(res => {
          console.log(res);

          const { ResultCode, ResultData } = res;
          if (ResultCode === 1) {
            this.state = ResultData;

            if (this.state.ShowLevel == 1) {
              this.form.Delivery_ProvinceId = this.state.First_Dealer_BaseInfo.Delivery_ProvinceId;
              this.form.Delivery_CityId = this.state.First_Dealer_BaseInfo.Delivery_CityId;
              this.form.Delivery_DistrictId = this.state.First_Dealer_BaseInfo.Delivery_DistrictId;
              this.form.Delivery_Address = this.state.First_Dealer_BaseInfo.Delivery_Address;
              this.areaCode = [
                this.state.First_Dealer_BaseInfo.Delivery_ProvinceId,
                this.state.First_Dealer_BaseInfo.Delivery_CityId,
                this.state.First_Dealer_BaseInfo.Delivery_DistrictId
              ];
            }
            if (this.state.ShowLevel == 2) {
              this.form.Delivery_ProvinceId = this.state.Double_Dealer_BaseInfo.Delivery_ProvinceId;
              this.form.Delivery_CityId = this.state.Double_Dealer_BaseInfo.Delivery_CityId;
              this.form.Delivery_DistrictId = this.state.Double_Dealer_BaseInfo.Delivery_DistrictId;
              this.form.Delivery_Address = this.state.Double_Dealer_BaseInfo.Delivery_Address;
              this.areaCode = [
                this.state.Double_Dealer_BaseInfo.Delivery_ProvinceId,
                this.state.Double_Dealer_BaseInfo.Delivery_CityId,
                this.state.Double_Dealer_BaseInfo.Delivery_DistrictId
              ];
            }
            if (this.state.ShowLevel == 3) {
              this.form.Delivery_ProvinceId = this.state.Door_Dealer_BaseInfo.Delivery_ProvinceId;
              this.form.Delivery_CityId = this.state.Door_Dealer_BaseInfo.Delivery_CityId;
              this.form.Delivery_DistrictId = this.state.Door_Dealer_BaseInfo.Delivery_DistrictId;
              this.form.Delivery_Address = this.state.Door_Dealer_BaseInfo.Delivery_Address;
              this.areaCode = [
                this.state.Door_Dealer_BaseInfo.Delivery_ProvinceId,
                this.state.Door_Dealer_BaseInfo.Delivery_CityId,
                this.state.Door_Dealer_BaseInfo.Delivery_DistrictId
              ];
            }

            this.loadCity = true;
          }
        });
    }
  }
};
</script>

<style>
/* 	page {
		background-color: #eaecef;
	} */
</style>
<style lang="scss"></style>
